<template>
    <div>
        <div class="back" v-show="showFood" @click="back">
            <i class="icon-arrow_lift"></i>
        </div>
        <transition name="move">
            <div class="food" v-show="showFood" ref="food">
                <div class="food-content">
                    <div class="image-header">
                        <img :src="food.image" alt="">
                    </div>
                    <div class="content">
                        <h1 class="title">{{food.name}}</h1>
                        <div class="detail">
                            <span class="sell-count">月售{{food.sellCount}}份</span>
                            <span class="rating">好评率{{food.rating}}%</span>
                        </div>
                        <price :food="food"></price>
                        <div class="cartcontrol-wrapper">
                            <cartcontrol :food="food" @cart-add="cartAdd"></cartcontrol>
                        </div>
                        <div @click.stop.prevent="addFood" class="buy" v-show="!food.count||food.count===0">加入购物车</div>
                    </div>
                    <split v-show="food.info"></split>
                    <div class="info" v-show="food.info">
                        <h1 class="title">商品信息</h1>
                        <p class="text">{{food.info}}</p>
                    </div>
                    <split></split>
                    <div class="rating">
                        <h1 class="title">商品评价</h1>
                        <ratingselect
                                :ratings="food.ratings"
                                :rating-select-parm="ratingSelectParm"
                        ></ratingselect>
                        <div class="rating-wrapper">
                            <ul v-if="food.ratings && food.ratings.length">
                                <li v-show="needShow(rating.rateType,rating.text)"
                                    v-for="(rating,index) in food.ratings" :key="index"
                                    class="rating-item border-1px">
                                    <div class="user">
                                        <span class="name">{{rating.username}}</span>
                                        <img class="avatar" width="12" height="12" :src="rating.avatar">
                                    </div>
                                    <div class="time">{{rating.rateTime | formatDate}}</div>
                                    <p class="text">
                                    <span :class="{ 'icon-thumb_up':rating.rateType===0,
                                                    'icon-thumb_down':rating.rateType===1}"></span>
                                        {{rating.text}}
                                    </p>
                                </li>
                            </ul>
                            <div class="no-rating" v-else>暂无评价</div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script type="text/ecmascript-6">
    import price from "../price/price";
    import BScroll from 'better-scroll';
    import cartcontrol from "../cartcontrol/cartcontrol";
    import Vue from 'vue';
    import split from "../split/split";
    import ratingselect from "../ratingselect/ratingselect";
    import {formatDate} from "../../../common/js/date";

    const ALL = 2;

    export default {
        components: {
            price,
            cartcontrol,
            split,
            ratingselect
        },
        data() {
            return {
                showFood: false,
                ratingSelectParm: {
                    selectType: ALL,
                    onlyContent: true,
                    desc: {
                        all: '全部',
                        positive: '推荐',
                        negative: '吐槽'
                    }
                }
            }
        },
        props: {
            food: {
                type: Object
            }
        },
        methods: {
            show() {
                this.showFood = true;
                this.$nextTick(() => {
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.food, {
                            click: true
                        });
                    } else {
                        this.scroll.refresh();
                    }
                });
            },
            back() {
                this.showFood = false;
            },
            addFood(event) {
                if (!event._constructed) {
                    return;
                }
                this.$emit('cart-add', event.target);
                Vue.set(this.food, 'count', 1);
            },
            cartAdd(target) {
                this.$emit('cart-add', target);
            },
            needShow(type, text) {
                if (this.ratingSelectParm.onlyContent && !text) {
                    return false;
                }
                if (this.ratingSelectParm.selectType === ALL) {
                    return true;
                } else {
                    return type === this.ratingSelectParm.selectType;
                }
            }
        },
        filters: {
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../../common/stylus/mixin.styl"
    .back
        position fixed
        top 10px
        left 0
        z-index 100

        .icon-arrow_lift
            display block
            padding 10px
            font-size 20px
            color #fff

    .food
        position fixed
        left 0
        top 0
        bottom 48px
        z-index 30
        width 100%
        background #fff
        transition all 0.2s linear

        &.move-enter-to, &.move-leave
            transform translate3d(0, 0, 0)

        &.move-enter, &.move-leave-to
            transform translate3d(100%, 0, 0)


        .image-header
            position relative
            width 100%
            height 0
            padding-top 100%

            img
                position absolute
                top 0
                left 0
                width 100%
                height 100%

        .content
            padding 18px
            position relative

            .title
                line-height 14px
                margin-bottom 8px
                font-size 14px
                font-weight 700
                color rgb(7, 17, 27)

            .detail
                margin-bottom 8px
                line-height 10px
                height 10px
                font-size 0

                .sell-count, .rating
                    font-size 10px
                    color rgb(147, 153, 159)
                    margin-right 12px

            .cartcontrol-wrapper
                position absolute
                right 12px
                bottom 12px

            .buy
                position absolute
                right 18px
                bottom 18px
                z-index 10
                height 24px
                line-height 24px
                padding 0 12px
                box-sizing border-box
                border-radius 12px
                font-size 12px
                color #fff
                background rgb(0, 160, 220)

        .info
            padding 18px

            .title
                line-height 14px
                margin-bottom 6px
                font-size 14px
                color rgb(7, 17, 27)

            .text
                line-height 24px
                padding 0 8px
                font-size 12px
                color rgb(77, 85, 93)

        .rating
            padding-top 18px

            .title
                line-height 14px
                margin-left 18px
                font-size 14px
                color rgb(77, 85, 93)

            .rating-wrapper
                padding 0 18px

                .rating-item
                    position relative
                    padding 16px 0
                    border-1px(rgba(7, 17, 27, 0.1))

                    .user
                        position absolute
                        right 0
                        top 16px
                        line-height 12px
                        font-size 0

                        .name
                            display inline-block
                            margin-right 6px
                            vertical-align top
                            font-size 10px
                            color rgb(147, 153, 159)

                        .avatar
                            border-radius 50%

                    .time
                        margin-bottom 6px
                        line-height 12px
                        font-size 10px
                        color rgb(147, 153, 159)

                    .text
                        line-height 16px
                        font-size 12px
                        color rgb(7, 17, 27)

                        .icon-thumb_up, .icon-thumb_down
                            margin-right 4px
                            line-height 16px
                            font-size 12px

                        .icon-thumb_up
                            color rgb(0, 160, 220)

                        .icon-thumb_down
                            color rgb(147, 153, 159)

                .no-rating
                    padding 16px 0
                    font-size 12px
                    color rgb(147, 153, 159)
</style>
